/**
 * @create 2022-05-04
 * @desc middle
 */

import { FC } from 'react';
import { Input, Select, FormInstance, Button } from 'antd';
import { FilterBlock, CollapseFormItem } from '@src/components';
import { sexOptions, workExperience } from '@common/constant/const';
import { useData } from '@components/pro-table';
import styles from './index.module.less';

const statusOption = [
  { label: '启动', value: 'enable' },
  { label: '禁用', value: 'disable' },
];
export const FilterComp: FC<{ formRef: FormInstance; onSearch: (params?: any) => void }> = ({
  formRef,
  onSearch,
}) => {
  const { refresh } = useData();

  return (
    <FilterBlock
      showMore
      form={formRef}
      layout="vertical"
      onFinish={() => onSearch(formRef.getFieldsValue())}
      RightBtn={<Button onClick={() => refresh()}>Refresh</Button>}
    >
      <div className="flex flex-wrap">
        <CollapseFormItem label="name" name="username" className={styles.colQuarter}>
          <Input placeholder="Please input" />
        </CollapseFormItem>
        <CollapseFormItem
          label="name (en)"
          name="username_en"
          className={styles.colQuarter}
          enableCollapse
        >
          <Input placeholder="Please input" />
        </CollapseFormItem>
        <CollapseFormItem label="Status" name="status" className={styles.colQuarter}>
          <Select placeholder="Please select" options={statusOption} allowClear />
        </CollapseFormItem>
        <CollapseFormItem label="Sex" name="sex" className={styles.colQuarter}>
          <Select placeholder="Please select" options={sexOptions} allowClear />
        </CollapseFormItem>
        <CollapseFormItem label="Work Experience" name="experience" className={styles.colQuarter}>
          <Select
            placeholder="Please select"
            options={workExperience.map((item) => ({ label: item, value: item }))}
            allowClear
          />
        </CollapseFormItem>
      </div>
    </FilterBlock>
  );
};
